<template>
	<div class="page-container padding-20 query-list-container">
		<div class="search-container">
			<el-form :inline="true" ref="form" size="small">
				<el-form-item label="统计时间">
					<el-date-picker
						v-model="rangeDate"
						type="daterange"
						align="right"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="pickerOptions"
					></el-date-picker>
				</el-form-item>
				<el-button type="primary" @click="onSearch" size="small">查询</el-button>
				<el-button @click="onReset" size="small">重置</el-button>
			</el-form>
		</div>
		<el-table class="mt-20 el-table-modify" :data="tableData" border show-summary :summary-method="getSummaries">
			<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
			<el-table-column prop="date" align="center" label="日期"></el-table-column>
			<el-table-column prop="ticketTotal" align="center" label="售票合计"></el-table-column>
			<el-table-column prop="paymentTicketTotal" align="center" label="付费售票"></el-table-column>
			<el-table-column prop="privilegeQuantity" align="center" label="权益观影"></el-table-column>
			<el-table-column prop="paymentAmount" align="center" label="实际支付金额"></el-table-column>
			<el-table-column prop="dealAmount" align="center" label="结算金额"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="100">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="linToDetailed(scope.row)">查看明细</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			ref="pagination"
			class="mt-20"
			background
			:page-size.sync="pageOption.pageSize"
			:total="pageOption.total"
			@size-change="onSizeChange"
			@current-change="onPageChange"
			layout="slot,->,prev,pager,next,sizes,jumper"
		>
			<span class="pagination-title">
				共 {{ pageOption.total }} 条记录 第 {{ pageOption.page }} /
				{{ pageOption.pageTotal }} 页
			</span>
		</el-pagination>
	</div>
</template>

<script>
import { movieOrder } from "@/api/report";
import { pickerOptions, momentFormatStr } from "@/utils/const";
import moment from "moment";

export default {
	name: "MoviewOrder",
	data() {
		this.pickerOptions = pickerOptions;
		return {
			rangeDate: [new Date(), new Date()],
			tableData: [],
			allData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			}
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.rangeDate = [new Date(), new Date()];
			this.requestData();
		},
		async requestData() {
      const { page, pageSize: size } = this.pageOption;
      let params = {};
      if (this.rangeDate[0]) {
        params.start = moment(this.rangeDate[0]).format(momentFormatStr.date);
        params.end = moment(this.rangeDate[1]).format(momentFormatStr.date);
			}
			
      const { data } = await movieOrder(params);
      this.allData = data;
      this.tableData = data.slice( (page - 1) * size, size);

      this.pageOption.total = data.length;
      this.pageOption.pageTotal = data.length ? Math.ceil(data.length / size) : 1;

      if (this.$refs.pagination) {
        let childrenRefs = this.$refs.pagination.$children;
        this.$nextTick(() => {
          childrenRefs.forEach(child => child.$forceUpdate());
        });
      }
    },
    onSizeChange(size) {
      const {page} = this.pageOption;
      this.pageOption.pageSize = size;
      this.pageOption.pageTotal = this.allData.length ? Math.ceil(this.allData.length / size) : 1;
      this.tableData = this.allData.slice((page - 1) * size, size);
    },
    onPageChange(page) {
      this.pageOption.page = page;
      this.tableData = this.allData.slice((page - 1) * this.pageOption.pageSize, page * this.pageOption.pageSize);
    },
    linToDetailed(row) {
      this.$router.push({name: 'movieOrderMgt', params: {rangeDate: this.rangeDate}})
		},
		getSummaries(param) {
        const { columns } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = this.allData.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = '';
          }
        });

        return sums;
      }
	},
	created() {
		this.requestData();
	}
};
</script>

<style lang="scss">
</style>
